<!-- 合同总金额控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <a-input-group>
      <a-input v-model="value1">
        <template #prepend>
          {{ icon }}
        </template>
      </a-input>
      <a-select v-model="value2" style="width: 120px">
        <a-option
          v-for="item in data.list"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}</a-option
        >
      </a-select>
    </a-input-group>
  </a-space>
</template>

<script lang="ts" setup>
  import { computed, reactive } from 'vue';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      oneValue?: any;
      values: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  const emit = defineEmits(['update:oneValue', 'update:values']);

  let value1 = computed({
    get() {
      let [val1, val2] = props.values;
      return val1;
    },
    set(val) {
      let [val1, val2] = props.values;
      emit('update:values', [val, val2]);
    },
  });

  let value2 = computed({
    get() {
      let [val1, val2] = props.values;
      return val2;
    },
    set(val) {
      let [val1, val2] = props.values;
      emit('update:values', [val1, val]);
    },
  });

  const data = reactive<any>({
    list: [
      {
        icon: '￥',
        value: '人民币',
        label: '人民币',
      },
      {
        icon: '$',
        value: '美元',
        label: '美元',
      },
    ],
  });
  const icon = computed(() => {
    let text = '';

    data.list.forEach((element: any) => {
      if (element.label === value1.value) {
        text = element.icon;
      }
    });

    return text;
  });
</script>

<style scoped lang="less"></style>
